@charset "utf-8";
.container{position: relative;width: 100%;height: 100%;overflow: hidden;box-sizing: border-box;}
.nav-container input{position: fixed;left: 0;bottom: 0;opacity: 0;z-index: 999;width: 20%;height: 100%;height: 0.8rem;}
.nav-container a{position: fixed;left:0;bottom: 0;display: inline-block;width: 20%;text-align: center;height: 0.8rem;line-height: 0.8rem;color: #fff;font-size: 0.3rem;text-shadow: 1px 1px 1px #999;background-color: #999;}
#radio-1,#radio-1+a{left: 0;}
#radio-2,#radio-2+a{left: 20%;}
#radio-3,#radio-3+a{left: 40%;}
#radio-4,#radio-4+a{left: 60%;}
#radio-5,#radio-5+a{left: 80%;}

.a:hover + div{background-color: red;}
.nav-container input:checked + a:after{content:"";width: 0;height: 0;overflow:hidden;border: 0.2rem solid transparent;border-bottom-color:#666;position: absolute;bottom: 100%;left:50%;margin-left: -0.2rem;}
.nav-container input:checked + a,
.nav-container input:checked:hover + a{background-color: #666;}
.nav-container input:hover + a{background: #666;}